<template>
  <!-- 文本消息 -->
  <div class="chat-bubble" :class="{'self': chat.isSelf}">
    <!-- 头像 -->
    <div class="head-url"  v-hammer:tap="(ev)=> onHeadClicked(ev)" v-hammer:press="(ev)=>onHeadPressed(ev)">
      <img
        :src="chat.fromAccountHeadurl ? chat.fromAccountHeadurl : require('@/assets/icons/head.svg')"
        alt
      />
    </div>

    <!-- 聊天内容 -->
    <div class="content">
      <div class="user-info" v-if="!chat.isSelf">
        <div class="user-level" :class="`user-level-${chat.role}`">{{ chat.role | Role}}</div>
        <div class="username">{{ chat.fromAccountNick }}</div>
      </div>

      <div class="bubble" @click="onPlay" :style="bubbleStyle">
        <!-- <span>{{ audioDuration }}</span> -->
        <img src="@/assets/icons/sound.svg" alt class="sound-image" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
declare const wx: any;
declare const $Vue: Vue;

@Component
export default class MessageSound extends Vue {
  @Prop({})
  chat: any;

  private audio: any;

  private timer: any;

  private duration: any = 0;


  private played: boolean = false;

  private isPlaying: boolean = false;

  protected mounted() {
    this.audio = new Audio();
    this.audio.src = this.chat.data.mediaUrl;
    this.audio.load();

    // 获取audio长度
    this.audio.onloadedmetadata = (res) => {
      this.duration = this.audio.duration;
    }
  }

  private onHeadClicked() {
    $Vue.$emit('onHeadClicked', {
      data: this.chat,
    })
  }

  private onHeadPressed() {
    $Vue.$emit('onHeadPressed', {
      data: this.chat,
    });
  }

  // 宽度样式 根据语音长度改变
  private get bubbleStyle() {
    let width = 48;
    if (this.audio) {
      let duration = Math.ceil(this.audio.duration);
      if (duration >= 0 && duration <= 60) {
        width = duration * 2;
      }
    }

    return {
      width: width + 'px',
    }
  }

  private get audioDuration() {
    return Math.ceil(this.duration);
  }
  /**
   * 点击播放暂停
   */
  private onPlay() {

    let playPromise;
    if (this.isPlaying) {
      playPromise = this.audio.play();
    } else {
      this.audio.pause();
    }
    playPromise = this.audio.play();
    let $this = this;
    if (playPromise) {
      playPromise.then(() => {
        this.isPlaying = true;
        //   // 音频加载成功
        //   // 音频的播放需要耗时
        // $this.timer = setInterval(() => {
        //   second --;
        //   if (second <= 0) {
        //     $this.audio.pause();
        //     clearInterval($this.timer);
        //   }
        // }, 1000);
      }).catch((e) => {
        // 音频加载失败
        console.error(e);
        this.$createToast({
          txt: '音频加载失败',
          type: "warn",
          time: 3000
        }).show();
        this.isPlaying = false;
      });
    }
  }
}
</script>

<style lang="stylus" scoped>

.sound-wave
  height 18px
.sound-image 
  width 24px
  height 24px

.self .sound-image 
  transform: rotateZ(180deg);
  float: right;
  position: relative;
  bottom: 0;
</style>

